<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>jQuery UI Example Page</title>
<link href="./css/jquery-ui.css" rel="stylesheet">
<style>
.box{
	width:100%;
	height:50px;
	background: #eee;
}
</style>
</head>
<body>

	<div class="box"></div>
	<div class="dialog-fir">
	  <p>这是一个动画显示的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>
	</div>
	<div class="dialog-sec">
	  <p>这是一个动画显示的对话框，用于显示信息。对话框窗口可以移动，调整尺寸，默认可通过 'x' 图标关闭。</p>
	</div>
	<button class="btn">原生dialog</button>
	<button class="btn-sec">自定义dialog</button>

<script src="./script/jquery.js"></script>
<script src="./script/jquery-ui.js"></script>
<script src="./component/widget.js"></script>
<script>
$(function(){

	$('.box').myWidget({
		color:'#990099',
		width:'50%',
	})

	main.$dislogFir=$('.dialog-fir')
	main.$dislogSec=$('.dialog-sec')

	$('.dialog-fir').dialog({
		autoOpen: false,
		title:'原生弹窗',
		show: {
			effect: "blind",
			duration: 1000
		},
		modal: true, 
    });

    $('.dialog-sec').superDialog({
    	autoOpen: false,
		title:'自定义弹窗',
		show: {
			effect: "blind",
			duration: 1000
		},
		modal: true, 
		complete:function(event,data){
			console.log('....complete....')
			console.log(data)
		},
    });

    $('.btn').click(function(){
    	$('.dialog-fir').dialog('open')
    })

    $('.btn-sec').click(function(){
    	$('.dialog-sec').superDialog('open')
    })

})
</script>
</body>
</html>
